ion-content,
.messages-item-group {
    --background: var(--ion-item-background);
}

.message-divider {
    position: relative;
    z-index: 4;
    width: 120px;
    margin: auto;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;

    // remove paddings
    --padding-end: 0px;
    --padding-start: 0px;
    --inner-padding-end: 0px;
    --ion-safe-area-left: 0px;
    --ion-safe-area-right: 0px;

    // on scrolling set sticky divider
    &.scrolling {
        position: sticky;
        top: 10px;
    }

    // center divider text
    ion-label {
        width: 100%;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
    }
}

.messages-item-group {
    &:last-child {
        margin-bottom: 20px;
    }

    .message-item-sliding:first-of-type {
        .message-container {
            margin-top: 0px;
        }
    }

    .message-user,
    .message-me {
        --padding-start: 8px;
        --padding-end: 0px;
        --ion-safe-area-left: 0px;
        --min-height: 32px;
    }

    .message-user {
        .user-avatar {
            position: sticky;
            top: 0px;
            margin-right: 0px;
            margin-inline-end: 8px;
            width: 26px;
            height: 26px;
        }
    }

    .message-container {
        position: relative;
        background: rgb(var(--ion-color-primary-rgb), 0.2);
        border-radius: 12px;

        padding: 4px 8px;
        margin-top: 12px;
        margin-left: 0px;
        margin-right: 0px;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        max-width: 70%;

        &.user-msg-padding {
            margin-left: 33px;
        }

        .text {
            font-weight: 400;
            font-size: 14px;
            white-space: pre-wrap;

            &:after {
                content: '';
                width: 3.4em;
                height: 12px;
                display: inline-block;
                vertical-align: top;
                visibility: hidden;
                font-size: 11px;
            }
        }

        .time {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 4px 8px 4px 4px;
            line-height: 14px;
            pointer-events: auto;
            color: var(--ion-color-medium);
        }
    }
}

.message-textarea {
    --background: var(--ion-color-light);
    border-radius: 20px;
    --padding-top: 10px;
    --padding-end: 10px;
    --padding-bottom: 10px;
    --padding-start: 10px;
}